<template xmlns="http://www.w3.org/1999/html">
  <div style="width: 900px">
  <span>
    <el-carousel height="400px">
      <el-carousel-item :key="banner.id" v-for="banner in bannerArr">
        <img :src="banner.url" width="100%" height="100%">
      </el-carousel-item>
    </el-carousel>
    </span>

    <div style="margin: 20px">
      <span style="font-size: 20px">推荐攻略</span>
    </div>
    <!--商品列表开始-->
    <el-row>
      <el-col :key="p.id" v-for="p in productArr">
        <el-card style="width:900px" >
          <a :href="p.href" style="color: black;" @click="viewUpdate(p.id)" target="_blank">

<!--          <span style="font-size: 15px;width: 70%;float: right">{{p.text}}</span>-->
          <img :src="p.imgUrl" width="400px" height="250px" style="margin: 0px 0px 0px 0px;float: left">
          <div  style="float: right;height: 280px" >
          <b style="font-size: 20px;float: right;width: 450px"  class="card">{{p.title}}</b>
            <br><br>
            <div style="font-size: 15px;width: 450px;height: 200px;color: gray">{{p.body}}</div>
            <br>
            <div style="float: right;color: gray">浏览量:{{p.view}}次</div>
          </div>
          </a>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>

export default {
  name: "hotelInfo",
  data(){
    return{
      bannerArr:[
     /*   "https://n1-q.mafengwo.net/s11/M00/3D/3F/wKgBEFtrlBWAUHczAAR1Jh3BMT410.jpeg",
        "https://p1-q.mafengwo.net/s11/M00/B7/90/wKgBEFsPa9CAadCJAAEo1LsX27I73.jpeg",
        "https://b1-q.mafengwo.net/s11/M00/E1/BE/wKgBEFsYhsCAUh5KAAXn20e3Ig4130.png",
        "https://n1-q.mafengwo.net/s13/M00/03/30/wKgEaVyu94SAIqDcAAheevdYPB4887.png"*/
      ],
      productArr:[/*{title:"福州市区及周边线路攻略大全",
        text:"斯米兰岛怎么去呢？去游玩应该做什么样的准备？选择一日游还是两日游？要不要在岛上过夜？过夜住宿该怎么选择？在岛上游玩有什么注意事项？相信看了这篇快问快答，你会对斯米兰有个全新的认识，还有疑问的也可以戳上方的“联系当地管家”/“咨询”。",
        url:"imgs/a.jpg",
        href:"https://www.mafengwo.cn/gonglve/ziyouxing/407931.html?cid=1010616",
        saleCount:2342},
        {title:"2018，我想在台湾毕业——吃货的超长旅吃纪实",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
        {title:"金陵的第101种打开方式——在溧水采摘秋天的美",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
        {title:"大理必吃美食：酸辣鱼、生皮、菌子、乳扇......",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
        {title:"探索FUJI ROCK 2017——冒险岛小绿人儿的通关秘籍",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
        {title:"【牵手看世界】之漫步云滇，从滇东南到版纳，一场突如其来，...",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
        {title:"他们是中国远征军，也是我走进腾冲的理由",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
        {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
        {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
        {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
        {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
        {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}*/]

    }
  },
  methods:{
    viewUpdate(id){
      let urlView ="http://localhost:9580/secondaryConsult/updateView/"+id
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(urlView).then((response) => {
        let responseBody = response.data;
        console.log('state=' + responseBody.state);
        console.log('message=' + responseBody.message);
    })
    }
  },
  created:function(){
    let url = 'http://localhost:9580/secondaryBanner';
    let url_consult = "http://localhost:9580/secondaryConsult"
    console.log('url = ' + url);

    this.axios
        .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
        .get(url).then((response) => {
      let responseBody = response.data;
      console.log('state=' + responseBody.state);
      console.log('message=' + responseBody.message);
      this.bannerArr = responseBody.data;
    });
    this.axios
        .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
        .get(url_consult).then((response) => {
      let responseBody = response.data;
      console.log('state=' + responseBody.state);
      console.log('message=' + responseBody.message);
      this.productArr = responseBody.data;
    })
  }

}
</script>

<style>
.card:hover{
  color: #ff9d00;
}

.head {
  color: #333;
  text-align: center;
  line-height: 60px;
  box-sizing: border-box;
}

.head1 {
  margin-top: 100px;
  padding-left: 0px;
  width: 950px;
}

.el-main {
  color: #333;
  height: 100%;
  padding-left: 450px;
  box-sizing: border-box;
}

.el-menu-demo {
  width: 100%;
  margin: 0 auto;
  padding-left: 350px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.head-r-l a {
  text-decoration: none;
}

.el-row {
  margin-bottom: 20px;
}

:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {

}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

h2 {
  margin: 0;
  font-size: 20px;
}

.span-s {
  font-size: 15px;
}

.hotel-live {
  text-align: center;
  width: 950px;
  margin-top: 50px;
}

.el-tabs-s {
  width: 950px;
  box-sizing: border-box;
}

.monitorTop {
  /*!/ position: relative;  相对定位,*/
  position: relative;
  /*vw是width of view(port)的缩写；
100vw表示百分之百的视图宽度；
123px是需要减去的宽度；
减号的两边必须都有至少一个空格*/
  height: calc(50% - 123px);
}

.monitorTop .el-tabs__item {
  font-size: 20px !important;
}

::v-deep .el-tabs__nav-scroll {
  width: 50%;
  margin: 0 auto
}
.img-s{
  width: 303px;
  height: 220px;
  margin-bottom: 15px;
  cursor: pointer;
}
.foot-s{
  background-color: #3e3e3e;
  height: 300px;
  text-align: center;
  color: #bbbbbb;
}
.b1{
  height: 60px;
  font-size: 15px;
}
.span-text{
  z-index: 3;
  position: relative;
  color: white;
  font-size: 25px;
  top: -125px;
  left: 110px;
}
.span-hotel{
  z-index: 3;
  position: relative;
  color: white;
  font-size: 15px;
  top: -35px;
  left: 10px;
}

</style>